<template>
  <div>
    <el-dialog :title="title" :visible="visible" @close="handleClose" width="600px">
      <el-form :model="shiftForm" label-position="right" ref="shiftFormRef" :rules="rules">
        <el-form-item label="仓库" :label-width="formLabelWidth" prop="stoId">
          <el-select clearable v-model="shiftForm.stoId" style="width: 100%;" @change="changeCk">
            <el-option v-for="(item, index) in wareList" :key="index" :value="item.stoId" :label="item.stoName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="库区" :label-width="formLabelWidth" prop="stoAreaId">
          <el-select clearable v-model="shiftForm.stoAreaId" style="width: 100%;" @change="changeKq">
            <el-option v-for="(item, index) in huoquList" :key="index" :value="item.hw" :label="item.huowname">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="剂型" :label-width="formLabelWidth" prop="agentId">
          <el-select clearable v-model="shiftForm.agentId" style="width: 100%;">
            <el-option v-for="(item, index) in jixingList" :key="index" :value="item.stoAreaId"
              :label="item.stoAreaName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="erp库区" :label-width="formLabelWidth" prop="erpCode">
          <el-select @change="handleErpChange" clearable v-model="shiftForm.erpCode" style="width: 100%;">
            <el-option v-for="(item, index) in erpList" :key="index" :value="item.hw" :label="item.huowname">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getAllWarehouseList, //仓库
    findAllBasicStoStockData, //库区
    findStoAreaList, //剂型
    findErpStock, //erp
    insertWmsErpStockMap, //新增
  } from '@/api/storeM/yxl.js'
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        shiftForm: {
          stoId: '', //仓库
          stoAreaId: '', //库区
          agentId: '', //剂型
          erpCode: '', //erp
          erpName:''
        },
        formLabelWidth: '80px',
        title: '新增',
        wareList: [], //仓库
        huoquList: [], //库区
        jixingList: [], //剂型
        erpList: [], //erp
        rules:{
          stoId: [
            { required: true, message: '请选择仓库', trigger: 'change' },
          ],
          stoAreaId: [
            { required: true, message: '请选择库区', trigger: 'change' },
          ],
          agentId: [
            { required: true, message: '请选择剂型', trigger: 'change' },
          ],
          erpCode: [
            { required: true, message: '请选择erp', trigger: 'change' },
          ],
        }
      }
    },
    created() {
      this.getWareList(); //仓库
      this.getHq(); //库区
      this.getJx(); //剂型
      this.getErp(); //erp
    },
    methods: {
      handleErpChange(val) {
        const selectedErp = this.erpList.find(item => item.hw === val);
        if (selectedErp) {
          this.shiftForm.erpName = selectedErp.huowname;
        } else {
          this.shiftForm.erpName = '';
        }
      },
      //切换仓库
      changeCk(val) {
        this.getHq(val);
      },
      //切换库区
      changeKq(val) {
        this.getJx(val);
      },
      //获取仓库
      getWareList() {
        getAllWarehouseList().then(res => {
          this.wareList = res.data;
        })
      },
      //获取库区
      getHq(val) {
        let params = {
          stoId: val
        }
        findAllBasicStoStockData(params).then(res => {
          this.huoquList = res;
        })
      },
      //获取剂型
      getJx(val) {
        let params = {
          stoId: val
        }
        findStoAreaList(params).then(res => {
          this.jixingList = res;
        })
      },
      //获取ERP
      getErp() {
        findErpStock().then(res => {
          this.erpList = res.data;
        })
      },
      // 提取重置表单的逻辑
      handleClose() {
        // 通过事件通知父组件更新visible值，触发update:visible事件
        this.$emit('update:visible', false);
        this.$nextTick(() => {
          this.$refs.shiftFormRef.resetFields();
        })
      },
      //提交表单
      submit() {
        this.$refs.shiftFormRef.validate((valid) => {
          if (valid) {
            const apiMethod = insertWmsErpStockMap;
            // 调用相应的 API 方法
            apiMethod(this.shiftForm).then(res => {
              this.$message({
                message: res.msg, // 显示成功消息
                type: 'success',
              });
              this.$emit('successfun');
              // 提交成功后可以选择清空表单
              this.handleClose();
            }).catch(err => {
              this.$message({
                message: err?.msg || '操作失败', // 捕获错误信息
                type: 'error',
              });
            });
          } else {
            // 校验失败
            return false;
          }
        });
      }
    },
  };
</script>

<style></style>
